<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <button @click="push">按钮</button> {{ activeCount }}
  </div>
  <script type="module">
    import { createApp, reactive, computed } from './node_modules/vue/dist/vue.esm-browser.js'
    
    // 关于按钮添加数据的方法封装在一起
    function computedText() {
      const data = [
        { text: '唱', completed: false },
        { text: '跳', completed: false },
        { text: '敲代码', completed: true },
      ]
      const todoS = reactive(data)
      const activeCount = computed(() => {
        return todoS.filter(item => !item.completed)
      })
      const push = () => {
        todoS.push({
          text: 'rap',
          completed: false
        })
      }
      return {
        activeCount,
        push
      }
    }
    
    createApp({
      setup(){
        return {
          ...computedText()
        }
      }
    }).mount('#app')
  </script>
</body>
</html>